iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

JavaScript 30天系列 第 6

JS30 - day06: Type-Ahead

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20181011/20111164CzKHlfTOJU.png

這次的東西好陌生啊完全沒聽過QQ
以前呼叫api 都用XMLHttpRequest或是jQuery
但是搜尋了一下發現axios套件好像很可以!
哈哈哈哈又要研究囉 下次用用看^^

使用者操作需求

使用者在輸入框內輸入關鍵字,即時過濾出符合的城市,並且列表的關鍵字上會有螢光筆樣式

技術重點

  • 使用fetch()接收資料
  • 使用promise.then()處理promise物件
  • 正規表達式RegExp()
  • 將陣列資料用join參數內定義的字串(或符號),將其連接轉為一個字串join()

流程步驟

  1. 預先知道api回傳為城市的JSON資料
  2. 先建立一個空的陣列cities 用來存放資料
  3. 用fetch取得API JSON資料,並push至cities陣列
  4. 建立function findMatches() 用於比對輸入的關鍵字
  5. 建立function displayMatches() 並設定監聽輸入框的change&keyup
  6. displayMatches()裡呼叫findMatches()進行比對,並將回傳資料組合成HTML display在頁面上

範例語法備註

[ fetch() ]

回傳的事promise物件,所以要對promise進行操作
詳細請看
範例中有示範這行

const prom = fetch(endpoint);
console.log(prom);
// 回傳不是data 是promise, 所以要操作promise

[ promise.then() ]

對promise物件進行工作,可以接接接 像水管一樣

fetch(endpoint)
  .then(blob => blob.json())
  .then(data => cities.push(...data));

使用fetch()取得api資料後
用then()來操作回傳的promise資料
可以先用fetch(endpointen).then(blob=> console.log(blob))
印出Response會發現需要抓取裡面的JSON,在__photo__:Response/json
所以寫成.then(blob => blob.json())並且逐筆push至cities中
data前面的...就是逐筆的寫法

[ RegExp() ]

正規表達式.. 好複雜呀 大概查了一下
後面的參數g代表全部,i代表不分大小寫

[ arrayObj.join() ]

將陣列組合成一個字串,並且以join中的參數做為分隔
在這裡因為map()逐筆回傳的資料都是陣列形式並且中間以逗點區分
但為了要放入HTML中
所以將它轉為字串並且以空格作為每筆的區分

const html = matchArray.map(place => {
    return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
  }).join('');

處理百進位逗點function()

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

上一篇
JS30 - day05: Flex Panel Gallery
下一篇
JS30 - day07: Array Cardio Day 2
系列文
JavaScript 30天11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言